<template>
  <div>
    <el-form ref="form" :model="paperForm" label-width="80px">
      <el-form-item label="题目">
        <!--隐藏编号-->
        <input type="hidden" v-model="paperForm.quId"></input>
        <!-- el-input  文本框-->
        <el-input v-model="paperForm.quContent"></el-input>
      </el-form-item>

      <el-form-item label="题型">
        <el-select v-model="paperForm.quType" placeholder="请选择题型">
          <el-option label="单选题" value="单选题"></el-option>
          <el-option label="多选题" value="多选题"></el-option>
          <el-option label="判断题" value="判断题"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="答案">

        <template v-if="paperForm.quType=='判断题'">
          <el-radio-group v-model="paperForm.quAnswer">
            <el-radio label="√"></el-radio>
            <el-radio label="×"></el-radio>
          </el-radio-group>

        </template>
        <template v-else-if="paperForm.quType=='单选题'">
          <el-radio-group v-model="paperForm.quAnswer">
            <el-radio label="A"></el-radio>
            <el-radio label="B"></el-radio>
            <el-radio label="C"></el-radio>
            <el-radio label="D"></el-radio>
          </el-radio-group>
        </template>

        <template v-else>
          <el-checkbox-group v-model="moreAnswer">
            <el-checkbox label="A" name="type"></el-checkbox>
            <el-checkbox label="B" name="type"></el-checkbox>
            <el-checkbox label="C" name="type"></el-checkbox>
            <el-checkbox label="D" name="type"></el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form-item>

      <el-form-item label="A:">
        <el-input type="textarea" v-model="paperForm.quAoption"></el-input>
      </el-form-item>
      <el-form-item label="B:">
        <el-input type="textarea" v-model="paperForm.quBoption"></el-input>
      </el-form-item>
      <el-form-item label="C:">
        <el-input type="textarea" v-model="paperForm.quCoption"></el-input>
      </el-form-item>
      <el-form-item label="D:">
        <el-input type="textarea" v-model="paperForm.quDoption"></el-input>
      </el-form-item>

      <el-form-item label="分数">
            <el-input v-model="paperForm.quScore"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
    export default {
        name: "PaperQuestionEdit",
        data(){
          return{
              paperForm:{},//试卷表单对象
              moreAnswer:[]//多选框答案
          }
        },
        methods:{
          onSubmit(){
              //判断是否是多选题提交
            if(this.paperForm.quType=="多选题"){
                  //清空
               this.paperForm.quAnswer="";
                //把数组转成字符串
               for(var i=0;i<this.moreAnswer.length;i++){
                    this.paperForm.quAnswer+=this.moreAnswer[i]
               }
            }
            var self = this;
            console.log(this.paperForm);
            //ajax提交
            this.$http.post("/paper-question/paper/update",this.$qs.stringify(this.paperForm))
            .then(function (rs) {
                self.$message(rs.data.msg);
                if(rs.data.code==200){
                   //回到表格页面
                  self.$router.replace("/main/paperQuestion");
                }else{
                  self.$message(rs.data.msg);
                }
            })

          }
        },
        created() {
          console.log(this.$route.query);
          this.paperForm = this.$route.query;
          if(this.paperForm.quType=="多选题"){
            //quAnswer="ABD"
              this.moreAnswer=this.paperForm.quAnswer.split("");
          }
        }

    }
</script>

<style scoped>

</style>
